<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/_linkPages/basePath.jsp"%>
<!DOCTYPE html>
<!-- saved from url=(0046)http://www.maomijiaoyi.com/index.php?/userjoin -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>猫咪交易网-用户注册</title>
    <meta name="keywords" content="宠物猫,买猫,卖猫,宠物猫交易,宠物猫价格">
    <meta name="description" content="猫咪交易网(www.maomijiaoyi.com)行业购宠第一品牌，千万家卖猫商家入驻覆盖全国各地，买放心宠物猫、了解最全面的宠物猫价格就上猫咪交易网、12年品牌值得信赖！">

    <link rel="stylesheet" href="${basePath}jsp/lqj/css/join.css">
    <link rel="stylesheet" href="${basePath}jsp/lqj/css/comment.css">
    <link rel="stylesheet" href="${basePath}jsp/lqj/css/layer.css">
    <link rel="stylesheet" href="${basePath}jsp/lqj/css/login.css">
    <script src="${basePath}jsp/lqj/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${basePath}jsp/lqj/js/comment.js" type="text/javascript" charset="utf-8"></script>
    <script src="${basePath}jsp/lqj/js/layer.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="${basePath}jsp/lqj/css/layer.css" id="layuicss-layer">
    <style>
        /*验证码样式*/
        #tab_yzmimg_src {
            font-family: Arial;
            font-style: italic;
            font-weight: bold;
            border: 0;
            letter-spacing: 2px;
            color: blue;
        }
    </style>
</head>
<body>

<!-- 引入公共头部 -->
<!-- 网页头部 -->
<div id="header">
    <div>

        <div class="center_1220">

            <!--<div class="left_float">
                当前所在城市:
            </div>

            <div class="hover_display_item">
                全国

                <div class="hover_display_div">

<%--                    <!-- <div class="left">--%>
                        <a href="">华南</a>
                    </div> -->

            <!--<div class="right">
<a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_75.html">安徽</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_80.html">广东</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_85.html">河南</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_91.html">江西</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_97.html">上海</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_102.html">天津</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_107.html">云南</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_76.html">澳门</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_81.html">广西</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_86.html">河北</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_92.html">吉林</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_98.html">山东</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_103.html">台湾</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_108.html">浙江</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_77.html">北京</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_82.html">贵州</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_88.html">湖南</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_93.html">辽宁</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_99.html">四川</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_104.html">西藏</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_87.html">黑龙江</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_78.html">重庆</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_83.html">甘肃</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_89.html">海南</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_95.html">宁夏</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_100.html">陕西</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_105.html">新疆</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_94.html">内蒙古</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_79.html">福建</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_84.html">湖北</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_90.html">江苏</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_96.html">青海</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_101.html">山西</a><a target="_blank" href="http://www.maomijiaoyi.com/index.php?/chanpinliebiao_chengshi_106.html">香港</a><a></a>					</div>

</div>
</div>		-->

            <div class="right_float">



                <!-- 未登录 -->
                <a target="_blank" href="${basePath}jsp/lqj/catlogin.jsp" rel="nofollow">登录</a>|
                <a target="_blank" href="${basePath}jsp/lqj/post.jsp" rel="nofollow">免费注册</a>


            </div>

            <div class="center_text">
                您好<strong></strong>，欢迎来到猫咪交易网
            </div>
        </div>

    </div>
    <div class="clearboth"></div>
    <div class="center_1220">
        <!-- 导航栏 nav_box-->
        <%@ page contentType="text/html;charset=UTF-8" language="java" %>
        <div id="nav_box">
            <div class="nav_box_left">

                <a target="_blank" href="http://localhost:8080/jsp/hs/index.jsp">
                    首页
                    <div class="background_color"><span></span></div>
                </a>

                <a target="_blank" href="${basePath}varieties?method=price">
                    买猫卖猫
                    <div class="background_color"><span></span></div>
                </a>


                <a target="_blank" href="http://localhost:8080/jsp/hs/choose.jsp">
                    选猫知识
                    <div class="background_color"><span></span></div>
                </a>


            </div>
            <div class="nav_box_right">
                <a target="_blank" href="${basePath}varieties?method=toIndex">
                    猫咪品种
                    <div class="background_color"><span></span></div>
                </a>
                <a href="http://localhost:8080/jsp/hs/aboutUs.jsp" rel="nofollow">
                    关于我们
                    <div class="background_color"><span></span></div>
                </a>
                <a target="_blank" href="http://localhost:8080/jsp/hs/releaseInformation.jsp">
                    发布信息
                    <div class="background_color"><span></span></div>
                </a>
            </div>

            <div class="logo">
                <a href="http://localhost:8080/jsp/hs/index.jsp">
                    <img title="猫咪交易网" alt="猫咪交易网" src="${basePath}jsp/hs/img/top_logo.png">
                </a>
            </div>
        </div>
    </div>

    <div class="clearboth"></div>
</div>

<div style="height: 80px;"></div>

<form action="${basePath}catlogin" method="post" onsubmit="return cheackinput(this)">


<!-- 注册表单框 join_box-->
<div id="join_box" style="border: #eee solid 3px;">

    <div id="Member_join">猫咪会员注册</div>

    <div id="regForm">

        <div class="form_box">

            <span>用户名　：</span>
                <input type="hidden" value="reg" name="method">
            <input tabindex="1" type="text" onblur="cheackname()" name="username" id="username" placeholder="请输入用户名 ，3~12字" autocomplete="off">

            <err id="nameshowerr"></err>

        </div>

        <div class="form_box">

            <span>密　码　：</span>

            <input tabindex="2" type="password" onblur="cheackpassword()" name="password" id="password" placeholder="请输入密码，字母开头6~16字" autocomplete="new-password">

            <err id="pwdshowerr"></err>

        </div>

        <div class="form_box">

            <span>确认密码：</span>

            <input tabindex="3" type="password" onblur="checkconfigpassword()" name="confirmpassword" id="confirmpassword" placeholder="请输入确认密码" autocomplete="new-password">

            <err id="confirmpassworderr"></err>

        </div>

        <div class="form_box">

            <span>联系电话：</span>

            <input tabindex="4" type="text" onblur="cheackPhonenumber()" name="telephone" id="telephone" placeholder="请输入联系电话" autocomplete="off">

            <err id="phoneshowerr"></err>

        </div>

        <div class="form_box">

            <span>电子邮件：</span>

            <input tabindex="5" type="text" onblur="checkEmail()" name="Email" id="Email" placeholder="请输入邮箱" autocomplete="off">

            <err id="emashowerr"></err>

        </div>

        <div class="form_box">

            <span>验证码　：</span>

            <input tabindex="6" type="text" onblur="checkvalidate()" name="VerificationCode" id="VerificationCode" placeholder="请输入验证码" style="width: 105px;" autocomplete="off">

<%--         <img src="${basePath}jsp/lqj/css/index.php" alt="" id="tab_yzmimg_src">--%>
            <input type="text" onClick="changeImg()" readonly="readonly" id="tab_yzmimg_src" class="unchanged" style="width: 100px;cursor:pointer" />
<%--                <input tabindex="6" type="button" name="VerificationCode" id="tab_yzmimg_src" onclick="changeImg()" tyle="width: 105px  autocomplete="off”/>--%>

            <span id="tab_yzmimg" onclick="changeImg()">看不清楚？换一张</span>

<%--            <script>--%>
<%--                document.getElementById("tab_yzmimg").onclick=function(){--%>
<%--                    document.getElementById("tab_yzmimg_src").src='/index.php?/checkCode/index/'+Math.random();--%>
<%--                }--%>
<%--            </script>--%>

            <err id="yzmerr"></err>

        </div>

        <!-- 注册条款 -->
        <div class="form_box">

            <div class="cen_box">
                <input tabindex="7" type="radio" id="agree_clause" value="1" name="clause" style="width: 15px;height: 15px;float: left;margin-top: 12px;margin-right: 20px;cursor: pointer;">

                <span style="color: #666;font-size: 14px;">阅读并完全同意 <tk id="btn_policy" style="color: #fd871d;cursor: pointer;">条款内容</tk></span>
                <err id="tkerr"></err>
            </div>

        </div>

        <!-- submit提交 -->
        <div align="center">
        <button type="submit" id="submit_form" status="1">提交申请</button>
        </div>
        <img id="loadimg" src="${basePath}jsp/lqj/img/loading-0.gif" style=" display: block; width: 60px; height: 24px; margin: 0 auto; margin-top: 60px; margin-bottom: 19px; display: none; ">

    </div>

</div>
</form>
<!-- 条款内容tk_info -->
<div id="tk_info" style="z-index: 99;">+

    <div id="tk_centerbox" style=" margin-top: 20px; width: 830px; height: auto; padding-bottom: 20px;">

        <p class="top_title">条款内容</p>

        <p class="tk_content" style="text-indent: 0; font-size: 16px; line-height: 30px; height: auto;">当您申请用户时，表示您已经同意遵守本规章。 <br>
            欢迎您加入本站点参加交流和讨论，本站点为公共论坛，为维护网上公共秩序和社会稳定，请您自觉遵守以下条款： <br>一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播下列信息： <br>
        </p>

        <p class="tk_content" style="text-indent: 0; font-size: 16px; line-height: 30px; height: auto; padding-left: 50px;">
            （一）煽动抗拒、破坏宪法和法律、行政法规实施的；<br>
            （二）煽动颠覆国家政-权，推-翻社会主义制度的；<br>
            （三）煽动分-裂国家、破坏国家统一的；<br>
            （四）煽动民族仇恨、民族歧视，破坏民族团结的；<br>
            （五）捏造或者歪曲事实，散布谣言，扰乱社会秩序的；<br>
            （六）宣扬封-建-迷-信、淫-秽、色-情、赌-博、暴-力、凶-杀、恐-怖、教-唆犯-罪的；<br>
            （七）公然侮辱他人或者捏造事实诽谤他人的，或者进行其他恶意攻击的；<br>
            （八）损害国家机关信誉的；<br>
            （九）其他违反宪法和法律行政法规的；<br>
            （十）进行商业广告行为的。<br>
        </p>

        <div id="agree_tk">阅读并同意</div>


    </div>


</div>

<!--控制阅读条款的js-->
<script type="text/javascript">

    //抓原素
    var btn_policy = document.getElementById("btn_policy");

    var hiddencontent = document.getElementById("tk_info");

    var agree = document.getElementById("agree_tk");

    var agree_clause = document.getElementById("agree_clause");



    var code; //在全局定义验证码
    function createCode() {
        code = "";
        var codeLength = 4; //验证码的长度
        var checkCode = document.getElementById("tab_yzmimg_src");
        var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
            'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数
        for(var i = 0; i < codeLength; i++) { //循环操作
            var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
            code += random[index]; //根据索引取得随机数加到code上
        }
        checkCode.value = code; //把code值赋给验证码
    }

    function changeImg(){
        createCode();
    };

    $(function () {
        createCode();
    }
    )
    //    定义状态变量
    var aa=1;
    //给条款内容添加单击事件
    btn_policy.onclick=function(){
        if(aa==1){
            hiddencontent.style.display='block';
            aa=0 ;
        } else if(aa==0){
            hiddencontent.style.display='none';
            aa=1;
        }
        return false;
    };

    //给阅读并同意添加单击事件
    agree.onclick=function(){
        if(aa==1){
            hiddencontent.style.display='block';
            aa=0 ;
        } else if(aa==0){
            hiddencontent.style.display='none';
            aa=1;
        };
        agree_clause.checked="checked";
    };

    // 表单验证
    // 验证用户名
    function cheackname(){
        var cheackusername  = new RegExp( /^[^\s'"\.,，。!@#$%*&]+$/);
        var username = document.getElementById("username").value;
        if( username.length <= 0 ){
            document.getElementById("nameshowerr").innerHTML='用户名不能为空';
            return false;
        }

        if( username.length < 3){
            document.getElementById("nameshowerr").innerHTML='用户名长度不足';
            return false;
        }

        if( username.length > 12){
            document.getElementById("nameshowerr").innerHTML='用户名长度超出';
            return false;
        }

        if(cheackusername.test(username)) {
            document.getElementById("nameshowerr").innerHTML='';
            $.get("${basePath}catlogin?method=checkUsername&username="+username, function (data) {
                if (data == -1) {
                    document.getElementById("nameshowerr").innerHTML = '用户名已存在';
                    return false;
                } else {
                    //没有被注册，隐藏信息
                    document.getElementById("nameshowerr").innerHTML = '';
                    return true;
                }
            });

        }else{
            document.getElementById("nameshowerr").innerHTML='用户名错误';
            return  false;
        }



    };

    // 验证密码
    function cheackpassword(){
        var password = document.getElementById("password").value;
        var cheackpassword  = new RegExp(/^[a-zA-Z]\w{5,15}$/);


        if( password.length <= 0 ){
            document.getElementById("pwdshowerr").innerHTML='密码不能为空';
            return  false;
        }

        if( password.length < 6){
            document.getElementById("pwdshowerr").innerHTML='密码长度不足';
            return  false;
        }

        if( password.length >16){
            document.getElementById("pwdshowerr").innerHTML='密码长度超出';
            return  false;
        }

        if(cheackpassword.test(password)){
            document.getElementById("pwdshowerr").innerHTML='';
            return true;
        }else{
            document.getElementById("pwdshowerr").innerHTML='密码格式不正确';
            return false;
        }
    };

    function checkconfigpassword(){

        var confirmpassword = document.getElementById("confirmpassword").value;
        var password = document.getElementById("password").value;
        if(confirmpassword.length == password.length){
            document.getElementById("confirmpassworderr").innerHTML='';
            return true;
        }else{

            document.getElementById("confirmpassworderr").innerHTML='密码不一致';
            return false;
        }
    }

    // 验证电话号码
    function  cheackPhonenumber(){
        var cheackPhonenumber = document.getElementById("telephone").value;
        var cheack2 = new RegExp(/^((\d{3,4})|\d{3,4}-)?\d{7,8}$/);
        if( cheack2.test(cheackPhonenumber) ){
            document.getElementById("phoneshowerr").innerHTML='';
            return true;

        }else{
            document.getElementById("phoneshowerr").innerHTML='电话不正确';
            return false;
        }
    };
    //  验证邮箱
    function checkEmail(){
        var Email  = document.getElementById("Email").value;
        var checkEmail = new RegExp(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/);

        if( Email.length <= 0){
            document.getElementById("emashowerr").innerHTML='邮箱为空';
            return false;


        }

        if(checkEmail.test(Email)){
            document.getElementById("emashowerr").innerHTML='';
            return true;
        }else{
            document.getElementById("emashowerr").innerHTML='邮箱不正确';
            return false;
        }
    };

    function checkvalidate(){

        var VerificationCode = document.getElementById("VerificationCode").value;
        if(VerificationCode.length <= 0){
            document.getElementById("yzmerr").innerHTML='验证码为空';
            return false;
        }else{
            document.getElementById("yzmerr").innerHTML='';
            return true;
        }
    }

    submit提交验证
    function cheackinput(){

        var _submitBtn = $('#submit_form');
        var username = document.getElementById("username").value;


    if(document.getElementById("nameshowerr").value == '用户名已存在'){
        return false;
    }
        if (_submitBtn.attr('status') == '1') {

            _submitBtn.attr('status', '0');

            var cheackusername = new RegExp(/^[^\s'"\.,，。!@#$%*&]+$/);

            if (username.length <= 0) {
                document.getElementById("nameshowerr").innerHTML = '用户名不能为空';
                _submitBtn.attr('status', '1');
                return false;


            }



            if (username.length < 3) {
                document.getElementById("nameshowerr").innerHTML = '用户名长度不足';
                _submitBtn.attr('status', '1');
                return false;
            }

            if (username.length > 12) {
                document.getElementById("nameshowerr").innerHTML = '用户名长度超出';
                _submitBtn.attr('status', '1');
                return false;
            }

            if (!(cheackusername.test(username))) {


                document.getElementById("nameshowerr").innerHTML = '用户名错误';
                _submitBtn.attr('status', '1');
                return false;
            }



            var password = document.getElementById("password").value;
            var cheackpassword = new RegExp(/^[a-zA-Z]\w{5,15}$/);


            if (password.length <= 0) {
                document.getElementById("pwdshowerr").innerHTML = '密码不能为空';
                _submitBtn.attr('status', '1');
                return false;
            }

            if (password.length < 6) {
                document.getElementById("pwdshowerr").innerHTML = '密码长度不足';
                _submitBtn.attr('status', '1');
                return false;
            }

            if (password.length > 16) {
                document.getElementById("pwdshowerr").innerHTML = '密码长度超出';
                _submitBtn.attr('status', '1');
                return false;
            }

            if (!(cheackpassword.test(password))) {
                document.getElementById("pwdshowerr").innerHTML = '密码不正确';
                _submitBtn.attr('status', '1');
                return false;
            }

            var confirmpassword = document.getElementById("confirmpassword").value;
            if (confirmpassword.length != password.length) {
                document.getElementById("confirmpassworderr").innerHTML = '密码不一致';
                _submitBtn.attr('status', '1');
                return false;
            }

            var cheackPhonenumber = document.getElementById("telephone").value;
            if (cheackPhonenumber.length <= 0) {
                document.getElementById("phoneshowerr").innerHTML = '电话为空';
                _submitBtn.attr('status', '1');
                return false;
            }

            var cheack2 = new RegExp(/^((\d{3,4})|\d{3,4}-)?\d{7,8}$/);
            if (!(cheack2.test(cheackPhonenumber))) {
                document.getElementById("phoneshowerr").innerHTML = '电话不正确';
                _submitBtn.attr('status', '1');
                return false;

            }


            var Emailcheack = document.getElementById("Email").value;

            if (Emailcheack.length <= 0) {
                document.getElementById("emashowerr").innerHTML = '邮箱为空';
                _submitBtn.attr('status', '1');
                return false;
            }

            var checkEmail = new RegExp(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/);

            if (!(checkEmail.test(Emailcheack))) {
                document.getElementById("emashowerr").innerHTML = '邮箱不正确';
                _submitBtn.attr('status', '1');
                return false;
            }

            var VerificationCode = document.getElementById("VerificationCode").value;
            if (VerificationCode.length <= 0) {
                document.getElementById("yzmerr").innerHTML = '验证码为空';
                _submitBtn.attr('status', '1');
                return false;
            }

                if (VerificationCode.toUpperCase() !== code) {
                    document.getElementById("yzmerr").innerHTML = '验证码错误';
                    _submitBtn.attr('status', '1');
                    return false;
                }

                //验证同意条款
                if (!document.getElementById('agree_clause').checked) {
                    document.getElementById("tkerr").innerHTML = '请阅读条款';
                    _submitBtn.attr('status', '1');
                    return false;
                } else {

                    document.getElementById("tkerr").innerHTML = '';
                    return true;
                }


            }
        }











</script>

<div style="height: 80px;"></div>

<!-- 引入公共尾部 -->
<!-- 网页底部 -->
<div id="footer">

    <div class="logo">
        <div class="logo_kuang">
            <div>
                <a href="http://www.maomijiaoyi.com/">
                    <img alt="猫咪交易网" title="猫咪交易网" src="${basePath}jsp/lqj/img/logo.png">
                </a>
            </div>
        </div>
    </div>


    <div class="banquan">
        <div class="center_1220">
            版权所有：猫咪交易网 www.maomijiaoyi.com  友情链接互换:qq 3416807849		</div>
    </div>

    <div class="banquan">
        <div class="center_1220">
            【免责声明：本站所有猫猫交易信息内容系用户自行发布，其真实性、合法性由发布人负责，本站不提供任何保证，亦不承担任何法律责任！】		</div>
    </div>

    <div class="banquan">
        <div class="center_1220">
            <a style="color: #FFF;" href="http://www.beian.gov.cn/portal/registerSystemInfo" target="_blank">
                <img src="${basePath}jsp/lqj/img/foot_link3.png">
                沪ICP备18022709号-1 			</a>
        </div>
    </div>

</div>





</body></html>